<template>
    <div class="StateDistribution">
        <p class="StateDistribution_P">设备状态分布</p>
        <div ref="chart" class="StateDistribution_main">

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const StateDistribution = () => {

    myChart = echarts.init(chart.value);

    window.addEventListener('resize', function () {
        myChart.resize();
    });

    const option = {
        legend: {
            bottom: '10%',
            left: 'center',
            textStyle: {
                color: '#fff',  // 字体颜色，和背景对比
            },
            itemWidth: 10, // 图例标志的宽度
            itemHeight: 10, // 图例标志的高度
        },
        series: [
            {
                name: '设备状态',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                startAngle: 0, // 设置起始角度，90度为顺时针旋转90度
                label: {
                    show: true,
                    position: 'outside',  // 标签显示在外部
                    rich: {
                        name: {
                            fontSize: 12,
                            lineHeight: 20,
                        },
                        value: {
                            fontSize: 12,
                            lineHeight: 20,
                            fontWeight: 'bold',
                        },
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold',
                    },
                },

                labelLine: {
                    show: true,  // 显示标注线
                    length: 20,  // 第一段线的长度
                    length2: 15, // 第二段线的长度
                    smooth: 0,   // 线条不平滑
                    lineStyle: {
                        width: 2,  // 设置线条宽度为 2
                        color: '#fff',  // 线条颜色为白色，确保在深色背景下可见
                    },
                },
                center: ['50%', '40%'],
                data: [
                    { value: 76.11, name: '运行' },
                    { value: 18.99, name: '待机' },
                    { value: 4.9, name: '故障' },
                ],
                color: ['#3b8cff', '#ffd666', '#ff6666'], // 自定义颜色
            },
        ],
    };

    myChart.setOption(option);
}


onMounted(() => {
    StateDistribution()
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();
    }
})

</script>

<style lang="scss" scoped>
.StateDistribution {
    width: 400px;
    height: 200px;
    position: fixed;
    top: 70px;
    right: 8px;
    background: url(/src/assets/Frame_Bottom.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .StateDistribution_P {
        width: 100%;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 15px;
    }

    .StateDistribution_main {
        width: 100%;
        height: 100%;
    }
}
</style>